<template>
	<gracePage :customHeader="false">
		<!-- 页面主体 -->
		<view slot="gBody" class="grace-body">
			<view class="my_money_recharge">
				<view :class="['my_money_recharge_item',item.cid==priceObj.cid?'my_money_recharge_item_select':'']" @tap="changeItem(item)"
				 v-for="item in list" :key="item.cid">
					<text v-if="item.cid!=-1">{{item.money}}元</text>
					<text v-if="item.cid!=-1">赠送{{item.remoney}}元</text>
					<text v-if="item.cid==-1">其他金额</text>
				</view>
			</view>
			<view style="border-top:1px solid rgba(0,0,0,0.1);border-bottom:1px solid rgba(0,0,0,0.1);" v-if="priceObj.cid==-1">
				<input type="text" style="text-align: left;" @input="priceInput" :value="price" class="grace-form-input" name="name1"
				 placeholder="请输入自定义金额" />
			</view>

			<view class="paylist clearfix">
				<view v-if="payList.wxpay" class="grace-flex grace-rows grace-flex-vcenter grace-border-b" style="height: 90rpx;"
				 @tap="changePay('wxpay')">
					<view class="iconfont icon-weixinzhifu" style="color: #3FCF77;font-size: 60rpx;"></view>
					<view style="color: #666666;font-size: 28rpx;margin-left: 10rpx;">微信支付</view>
					<view class="iconfont icon-xuanzhong" v-if="payment_method=='wxpay'" style="color:#FD815F;margin-left: auto;font-size: 40rpx;margin-right: 20rpx;"></view>
				</view>
				<view v-if="payList.alipay" class="grace-flex grace-rows grace-flex-vcenter" style="height: 90rpx;" @tap="changePay('alipay')">
					<view class="iconfont icon-zhifubaozhifu" style="color: #02A9F1;font-size: 60rpx;"></view>
					<view style="color: #666666;font-size: 28rpx;margin-left: 10rpx;">支付宝</view>
					<view class="iconfont icon-xuanzhong" v-if="payment_method=='alipay'" style="color:#FD815F;margin-left: auto;font-size: 40rpx;margin-right: 20rpx;"></view>
				</view>
			</view>
			<view class="gopay" @tap="goPayBtn">支付</view>
		</view>
	</gracePage>
</template>
<script>
	import gracePage from '../../graceUI/components/gracePage.vue';
	export default {
		data() {
			return {
				list: [],
				priceObj: {
					cid: ""
				},
				price: "",
				payment_method: "wxpay",
				payList: {

				}
			};
		},
		onLoad() {
			this.getData()
			this.getPayList()
		},
		methods: {
			getPayList() {
				this.gRequest.get('/payinfo/getpaylist', {}, res => {
					this.payList = res.data
				});
			},
			getData: function() {
				this.gRequest.post('/recharges', {}, "form", {}, res => {
					res.data.push({
						chargesname: "",
						cid: "-1",
						money: "其他金额"
					})
					this.count = 3 - (this.list.length % 3)
					this.setData({
						list: res.data
					});
				});
			},
			priceInput() {
				this.priceObj = {
					cid: ""
				}
			},
			goPayBtn() {
				if (!this.priceObj.cid) {
					uni.showToast({
						title: "请选择充值金额",
						icon: "none"
					})
					return
				}
				if (this.priceObj.cid == -1) {
					if (!this.price) {
						uni.showToast({
							title: "请输入自定义金额",
							icon: "none"
						})
						return
					}
				}
				this.gRequest.post('/recharges/charge', {
					member_id: JSON.parse(uni.getStorageSync("userInfo")).member_id,
					cid: this.priceObj.cid,
					price: this.priceObj.money
				}, "form", {}, res => {
					if (res.data) {
						this.toPay(res.data.chargeid)
					}
				});
			},
			changePay(type) {
				this.payment_method = type;
				this.wxActive = true;
				this.aliActive = false;
			},
			changeItem(item) {
				this.priceObj = item
				this.price = ""
			},
			priceInput(e) {
				this.priceObj = {
					cid: "-1"
				}
				this.price = e.target.value
			},
			toPay(order_id) {
				let total = this.priceObj.cid == -1 ? this.price : this.priceObj.money;
				if (this.payment_method == 'wxpay') {
					this.gRequest.post("/wxpay/chargePay", {
						member_id: JSON.parse(uni.getStorageSync("userInfo")).member_id,
						total: total,
						rec_id: order_id,
					}, 'form', {}, res => {
						if (res.status == 1) {
							uni.requestPayment({
								provider: "wxpay",
								orderInfo: res.data, //微信、支付宝订单数据
								success: (res) => {
									uni.redirectTo({ url: '../myorders/myorders' });
								},
								fail: (err) => {
									uni.showToast({
										title: '支付失败',
										'icon': 'none'
									})
								}
							})
						}
					});
				} else if (this.payment_method == 'alipay') {
					this.gRequest.post("/alipay/rechargetoPay", {
						member_id: JSON.parse(uni.getStorageSync("userInfo")).member_id,
						total: total,
						rec_id: order_id,
					}, 'form', {}, res => {
						if (res.status == 1) {
							uni.requestPayment({
								provider: "alipay",
								orderInfo: res.data, //微信、支付宝订单数据
								success: (res) => {
									uni.redirectTo({ url: '../myorders/myorders' });
								},
								fail: (err) => {
									uni.showToast({
										title: '支付失败',
										'icon': 'none'
									})
								}
							})
						}
					});
				} else {
					Toast("支付成功")
				}
				// if (this.payment_method == 1) {
				// 	//console.log(order_id,total);
				// 	this.gRequest.get('/wxpay/towxpay', {
				// 		total: total,
				// 		order_id: order_id,
				// 	}, res => {
				// 		if (res.data) {
				// 			window.location.href = response.data.mweb_url;
				// 		}
				// 	});
				// } else if (this.payment_method == 2) {
				// 	//console.log(order_id,total);
				// 	this.gRequest.get('/alipay/toalipay', {
				// 		total: total,
				// 		order_id: order_id,
				// 	}, res => {
				// 		if (res.data) {
				// 			window.location.href = response.data.mweb_url;
				// 		}
				// 	});
				// }
			},
		},
		components: {
			gracePage
		}
	};
</script>
<style>
	page {}
</style>
<style lang="scss">
	.my_money_recharge {
		width: 100%;
		display: flex;
		align-items: center;
		flex-direction: row;
		// justify-content: space-between;
		margin-top: 4vw;
		flex-wrap: wrap;
		// padding: 0 3vw;
	}

	.my_money_recharge_item {
		width: 27vw;
		height: 20vw;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		color: #333333;
		border: 1px solid #CCCCCC;
		border-radius: 2vw;
		margin-bottom: 3vw;
		margin-right: 5vw;

		&:nth-child(3n) {
			margin-right: 0;
		}
	}

	.my_money_recharge_item>span:nth-child(1) {
		font-size: 5vw;
		font-weight: 600;
	}

	.my_money_recharge_item>span:nth-child(2) {
		font-size: 3.2vw;
	}

	.my_money_recharge_item_select {
		border: 1px solid #F1C40F;
	}

	.gopay {
		width: 80vw;
		height: 12vw;
		text-align: center;
		line-height: 12vw;
		background-color: #ff950c;
		border-radius: 2vw;
		color: #FFFFFF;
		margin-top: 4vw;
		margin: 10vw auto 0;
	}
</style>
